<!--
 * @Author: zhang ke
 * @Date: 2025-07-05 16:51:48
 * @LastEditors: your name
 * @LastEditTime: 2025-07-05 17:42:42
 * @Description: 
 * @FilePath: \vue3-admin\src\views\screen\components\rank.vue
-->
<template>
  <div class="wrapper">
    <div class="box">
      <!-- 头部 -->
      <div class="title-wrapper">
        <div class="title">热门景区排行</div>
        <img class="title-icon" src="../images/dataScreen-title.png" />
      </div>
      <!-- echarts -->
      <div class="table-wrapper">
        <div class="table-title">
          <div class="tag tag1">排名</div>
          <div class="tag tag2">景区</div>
          <div class="tag tag3">预约数量</div>
        </div>
        <div class="table-box">
          <div class="list" v-for="item in list">
            <div class="left">
              <div class="icon"></div>
            </div>
            <div class="name">
              {{ item.name }}
            </div>
            <div class="right">
              <el-progress  :text-inside="true" :stroke-width="20" :percentage="item.num" :color="item.color" />
            </div>
            <div class="number">{{item.num}}w</div>
          </div>

        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
const list = ref([
  {
    name:'峨眉山',
    num:80,
    color:'#0080ed'
  },
  {
    name:'云台山',
    num:60,
    color:'#f47f6e'
  },
  {
    name:'华山',
    num:50,
    color:'#48c2e1'
  },
  {
    name:'泰山',
    num:40,
    color:'#f3b446'
  },
  {
    name:'凤凰山',
    num:30,
    color:'#8381ec'
  },
])
</script>

<style scoped lang="scss">
.wrapper {
  margin-top: 10px;
  width: 100%;
  height: 340px;

  .box {
    width: 100%;
    height: 100%;
    background: url('../images/dataScreen-main-lb.png') no-repeat;
    background-size: cover;

    .title-wrapper {
      padding-left: 10px;

      .title {
        color: white;
        font-size: 20px;
        margin-bottom: 2px;
      }

      .title-icon {
        width: 50px;
      }
    }

    .table-wrapper {
      width: 100%;
      height: 270px;
      margin-top: 30px;
      padding: 10px;

      // position: relative;
      .table-title {

        display: flex;
        align-items: center;
        width: 100%;
        height: 40px;
        background: url('../images/rankingChart-bg.png') no-repeat;
        background-size: cover;

        .tag {
          color: #f6b342;
          font-weight: bold;
          text-align: center;
        }

        .tag1 {
          flex: 1;
        }

        .tag2 {
          flex: 1;
        }

        .tag3 {
          flex: 3;
          margin-right: 20px;
        }
      }

      .table-box {
        width: 100%;
        .list{
          padding:10px;
          display: flex;
          width: 100%;
          .left{
            flex: 1;
            display: flex;
            .icon{
              margin-left: 20px;
              width: 20px;
              height: 20px;
              background: #ccc;
            }
          }
          .name{
            text-align: center;
            flex: 1;
            color: #fff;
          }
          .right{
            flex: 2.5;
            padding:0 20px;
            
          }
          .number{
            flex: 0.6;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
<style>
 .el-progress-bar__outer {
  background-color: #0a1453; /* 背景色 */
}
/* 边框颜色 */
.el-progress-bar__outer {
  border: 1px solid #0a67c8;
}

</style>
